<template>
    <div class="income">
        <cube-scroll
                v-if="data.length > 0"
                ref="scroll"
                :options="scroll_option"
                @pulling-up="upLoad"
        >
            <item
                    v-for="item in data"
                    :key="item.id"
                    :data="item"
            >
            </item>
        </cube-scroll>
        <empty v-else>暂无收入记录</empty>
    </div>
</template>

<script>
import Item from "./components/item"
import Empty from "@c/empty"
export default {
    name: "income",
    data() {
      return {
          data: [],
          limit: [0,20],
          // 滚动条配置
          scroll_option: {
              scrollbar:true,
              pullUpLoad:{
                  txt:{
                      more:"上拉加载",
                      noMore:"----我也是有底线的----"
                  }
              }
          }
      }
    },
    components: {
        Item,
        Empty
    },
    mounted() {
        this.getList()
    },
    methods: {
        /**
         * 获取列表
         */
        getList() {
            this.$sendGet("finance/income",{
                limit: this.limit
            })
                .then((res) => {
                    let data = res.data.data
                    if(data.length > 0) {
                        this.data.push(...data)
                        this.limit[0] += this.limit[1]
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,false);
                    } else {
                        this.$refs.scroll && this.$refs.scroll.forceUpdate(true,true);
                    }
                })
        },
        /**
         * 上拉加载
         */
        upLoad() {
            this.getList()
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .income{
        color: @font-color2;
    }
</style>
